<template>
  <a-modal 
    :visible="visible"
    okText="提交" 
    cancelText="取消" 
    :title="title"
    :destroyOnClose="true"
    :maskClosable="false"
    :keyboard="false"
    @cancel="closeModal()" 
    @ok="handleSubmit">
    <a-form  :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
      <a-form-item>
        <template slot="label">
          <span class="ant-form-item-required">姓名</span>
        </template>
        <a-input
          autocomplete="off"
          v-model="formData.userName"
          :maxLength="10"
          placeholder="请输入姓名"
        />
      </a-form-item>
      <a-form-item>
        <template slot="label">
          <span class="ant-form-item-required">手机号</span>
        </template>
        <a-input 
          autocomplete="off"
          v-model="formData.userPhone"  
          :maxLength="11"        
          placeholder="请输入手机号"
        />
      </a-form-item>
      <a-form-item>
        <template slot="label">
          <span class="ant-form-item-required">用户角色</span>
        </template>
        <a-select 
          showSearch
          allowClear
          style="width: 150px"
          v-model="formData.userRoleId"
          placeholder="请选择"
        >
        <a-select-option :value="item.value" v-for="(item,index) in userRoleOptions" :key="index">
          {{item.label}}
        </a-select-option>
        </a-select>
      </a-form-item>      
      <a-form-item label="身份类型">
        店员
      </a-form-item>
      <a-form-item>        
        <template slot="label">
          <span class="ant-form-item-required">状态</span>
        </template>
        <a-radio-group 
          v-model="formData.userStatus"
          :options="statusList"></a-radio-group>
      </a-form-item>
      <a-form-item>    
        <template slot="label">
          <span class="ant-form-item-required">员工二维码</span>
        </template>
        <ImageUploadList
          :limit="1"
          :multiple="false"
          :value="formData.qrCode"
          class="qrcode"
          :showUploadList="false"
          @change="handleChangeQrcode">
        </ImageUploadList>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import ImageUploadList from '@/components/form/UploadImage';
import {mapState} from 'vuex';

export default {
  name: 'user-info',
  components:{
    ImageUploadList
  },
  props: {
    record: {
      type: Object,
      default() {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo || {},
    }),
    title () {
      return this.record.id ? '修改员工' : '新增员工'
    }
  },
  data () {
    return {
      statusList:[
        {
          label:'停用',
          value:0,
        },{
          label:'启用',
          value:1
        }
      ],
      userRoleOptions:[
        // {
        //   label:'总店',
        //   value:1
        // },{
        //   label:'分店',
        //   value:2
        // },{
        //   label:'供应商',
        //   value:3
        // }
      ],
      formData:{}
    }
  },
  watch: {
    visible(newVal){
      this.resetData();
      if(newVal){
        this.getDetail();
      }
    }
  },
  created(){
    this.getUserRoles();
  },
  methods: {
    resetData(){
      this.formData={
        userName:'',//姓名
        userPhone:'',//用户手机号
        shopId:this.userInfo.shopId,//店铺ID
        userIdType:2,//员工身份类型1店长2店员
        userRoleId:'',//用户角色
        userStatus:1,//是否启用（0.,否 1.启用）
        qrCode:'',//员工二维码图片
      }
    },
    async getDetail(){
      let id=this.record.id;
      if(!id){
        return;
      }
      let res=await this.$get('/shop/user/query',{
        id
      });
      if(res && res.returnCode=='1000'){
        let userInfo=res.dataInfo||{};
        this.formData={
          userName:userInfo.userName,
          userPhone:userInfo.userPhone,
          userIdType:2,
          userRoleId:userInfo.userRoleId,
          userStatus:userInfo.userStatus,
          qrCode:userInfo.qrCode,
          shopId:this.userInfo.shopId
        }
      }
    },
    async getUserRoles(){
      console.log(this.userInfo)
      let res=await this.$get('/shop/userrole/page',{
        shopId:this.userInfo.shopId
      })
      if(res && res.returnCode=='1000' && res.dataInfo && res.dataInfo.length>0){
        this.userRoleOptions = res.dataInfo.map(item=>{
          return {
            label:item.roleName,
            value:item.id,
          }
        })
        console.log('this.userRoleOptions',this.userRoleOptions)
      }
    },
    handleChangeQrcode(url){
      this.formData.qrCode=url;
    },
    async handleSubmit () {
      console.log(this.formData)
      if(!this.formData.userName){
        this.$message.error('请输入姓名')
        return false;
      }
      if(!this.formData.userPhone){
        this.$message.error('请输入手机号')
        return false;
      }
      if(!this.formData.userRoleId){
        this.$message.error('请选择用户角色')
        return false;
      }
      if(!this.formData.qrCode){
        this.$message.error('请上传员工二维码图片')
        return false;
      }
      let url="/shop/user/add";
      if(this.record.id){
        url="/shop/user/update";
        this.formData['id']=this.record.id;
      }
      let res = await this.$post(url, this.formData);
      if(res && res.returnCode=='1000'){
        this.$message.success('保存成功！')
        this.closeModal(true)
      }
    },
    closeModal (freshTable) {
      this.resetData();
      this.$emit('cancel', freshTable)
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar_img{
    max-width:104px;
  }
  /deep/ .qrcode{
    width:104px;
    img{
      width:100%;
    }
  }
</style>
